<template>
    <div class="usersList">
        <div class="searchCondition">
            <div>
                <el-button style="margin-left: 20px" @click="addUser" size="small" icon="el-icon-plus">添加用户</el-button>
                <el-button style="margin-left: 20px" @click="deleteUser" size="small" type="danger" icon="el-icon-delete">删除用户</el-button>
            </div>
            <el-input placeholder="请输入内容" v-model="searchText">
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </div>
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="邮箱"
                    >
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="邮箱"
                    >
            </el-table-column>
            <el-table-column
                    prop="created_at"
                    label="创建时间"
                    show-overflow-tooltip>

            </el-table-column>
            <el-table-column
                    prop="updated_at"
                    label="最后更新时间"
                    show-overflow-tooltip>
            </el-table-column>
        </el-table>
        <div class="pager">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="total">
            </el-pagination>
        </div>
        <add-user v-if="isShowUser" @close="close"/>
    </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import AdminApiActions from "@/components/api/admin-api-actions";
    import AddUser from "@/components/user-manager/dialog/add-user.vue";
    import moment from "moment";
    @Component({
        components:{
            AddUser
        }
    })
    export default class UserList extends Vue {
        public tableData:Array<any>=[];
        public isShowUser:boolean=false;
        public searchText:any="";
        public total=0;
        public pageSize:any=10;
        public curPage:any=1;
        async created(){
             await this.initPage();
        }
        public async initPage(){
            const result:any=await AdminApiActions.getUserList();
            this.tableData=result.data.result;
            this.tableData.forEach(item=>{
                item.created_at=moment(item.created_at).format("YYYY-MM-DD HH:mm");
                item.updated_at=moment(item.updated_at).format("YYYY-MM-DD HH:mm");
            });
            this.total=result.data.total;
        }
        public handleSelectionChange(ev:any){
            return ev;
        }
        public async handleSizeChange(pageSize){
            this.pageSize=pageSize;
            await this.initPage();
        }
        public async handleCurrentChange(curPage){
            this.curPage=curPage;
            await this.initPage();
        }
        //添加用户
        public addUser(){
            this.isShowUser=true;
        }
        //删除用户
        public async deleteUser(){
            let userTables:any=this.$refs.multipleTable;
            let selectData:Array<any>=userTables.selection;
            let ids:Array<any>=new Array<any>();
            selectData.forEach(item=>{
                ids.push(item.id);
            });
            this.curPage=1;
            await AdminApiActions.deleteUsers({ids:ids});
            await this.initPage();
        }
        public async close(){
            await this.initPage();
            this.isShowUser=false;
        }
    }
</script>
<style lang="less">
    .usersList{
        width: 100%;
        height: 100%;
        .el-table__body-wrapper {
            overflow-y: auto;
            position: relative;
            height: calc(100% - 120px);
        }
        .el-table--fit{
            height: calc(100% - 120px);
        }
        .el-pagination{
            margin-top: 20px;
        }
        .searchCondition{
            height: 60px;
            width: 100%;
            display: flex;
            align-items: center;
            .el-input-group{
                width: 30%;
                margin-right: 30px;
            }
            justify-content: space-between;
        }
    }
</style>
